  body{ 
    display: grid;
    grid-template-areas: 
      "header"
      "article"
      "footer";
    grid-template-rows: 40px 1fr 45px;  
    grid-template-columns: 1fr;
    height: 100vh;
    margin: 0;
    }  
  #pageHeader {
    background: rgb(224, 203, 206);
    border: 1px solid yellow;
    grid-area: header;
    }
  #pageArticle{
    grid-area: article;
  }
  #pageFooter {
    grid-area: footer;
    background: rgb(224, 203, 206);
    border: 1px solid yellow;
    }

  @media all and (max-width: 575px) {
    body { 
      grid-template-areas: 
        "header"
        "article"
        "footer";
      grid-template-rows: 40px 1fr 40px;  
      grid-template-columns: 1fr;
   }
 }


header p{
    color:rgb(5, 50, 134);
    margin: 0px;
    text-align: center;
    padding: 7px;
    font-weight: 700;
    letter-spacing: 20px;
}
#pageArticle{
    position:relative;
    background-image: url("../images/dl.jpg");
    background-size: cover;
}
#pageArticle .denglu{
    margin-left: 20% ;
    margin-right: 20%;
    padding:0px;
    height: 100%;
    background: rgba(179, 141, 117, 0.87);
}
#login{
 padding-top: 20%;
 padding-bottom: 20%;
  text-align: center;
}
#login input{
    width: 45%;
    height: 35px;
}
#login .login_btn input{
    background-color: coral;
    width:50%;
    margin-top: 10px;
    border: none;
    color: whitesmoke;
    text-align: center;
}
#login #help{
    letter-spacing: 2px;
    text-align:center;
    margin-top: 20px;
    font-size:larger;

}

.link{
    text-align: center;
}
#lx{
  float: right;
  margin-right: 50px;
}